<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css"> -->
        <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css" />
        <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css" />
        <style>
            .account {
                width: 300px;
                margin: 0px auto;
            }
        </style>
        <title>Document</title>
    </head>
    <body>

        {% include 'app01/nav_bar.html' %}    

        <div class="account">
            <form id='f1'>
                {% for field in objs %}
                    {% if field.name == 'code' %}
                    <div class="form-group">
                            <label for="{{ field.id_for_label }}">{{ field.label }}</label> 
                            <div class="clearfix">
                                <div class="col-md-6" style="padding-left: 0;">{{ field }}</div>
                                <div class="col-md-6"><input type="button" class="btn btn-default" value="点击获取验证码" id='code_btn' onclick="submitCode();"></div>
                            </div>
                    </div> 
                    {% else %}
                        <div class="form-group">
                            <label for= "{{ field.id_for_label }}">{{field.label}}</label> 
                            {{field}}
                        </div>
                    {% endif %}
                {% endfor %}
                <!-- <button type="submit" class="btn btn-default">Submit</button> -->
                <a onclick="submitForm();" class="btn btn-default">注册</a>
            </form>
        <div>

        
        <script src="/static/jquery-1.12.4.js"></script>
        <script>
             function submitForm(){
                $('.errmsg').remove();
                //var email=$('input[name="email"]').val();
                //var var_nm1 = $.cookie('csrftoken');
                var username = $('#id_username').val();
                var email= $('#id_email').val();
                var password= $('#id_password').val();
                var confirm_password= $('#id_confirm_password').val();
                var mobile_phone= $('#id_mobile_phone').val();
                var code= $('#id_code').val();

                    $.ajax({
                        url: '/app01/register/',
                        type: 'POST',
                        //headers:{'X-CSRFToken': token},
/*                        
                        data: { "username":username,
                                'email':email,
                                "password":password,
                                'confirm_password':confirm_password,
                                'mobile_phone':mobile_phone,
                                'code':code
                                },
  */                  
                        data:$('#f1').serialize(),
                        dataType:'JSON',
                        success:function(arg){
                            console.log(arg);
                            if(arg.status){
                                

                            }
                            else{
                                $.each(arg.msg, function(index,value){
                                    console.log(index,value);
                                    var tag = document.createElement('span');
                                    tag.innerHTML =value[0];
                                    tag.className='errmsg';
                                   if (index=='__all__'){
                                        index = 'confirm_password'
                                    }
                                    console.log('input[name="'+index+'"]');
                                    $('#f1').find('input[name="'+index+'"]').after(tag);
                                })
                                
                            }    

                        }
                    })
                }


            function submitCode(){
                $('.errmsg').remove();
                //var nm1=$('input[name="inputname"]').val();
                //var var_nm1 = $.cookie('csrftoken');
                //var mobile_phone = $('#id_mobile_phone').val();
                    $.ajax({
                        url: '/app01/submit_code/',
                        type: 'POST',
                        //headers:{'X-CSRFToken': token},
                        //data: { 'id':1},
                        data:$('#f1').serialize(),
                        dataType:'JSON',
                        success:function(arg){
                            console.log(arg);
                            if (arg.status){

                            $("#code_btn").attr('value','已发送 60s');
                            $("#code_btn").attr('disabled',true);
                            }
                            else{
                                $.each(arg.msg, function(index,value){
                                    console.log(index,value);
                                   if (index=='mobile_phone'){
                                    var tag = document.createElement('span');
                                    tag.innerHTML =value[0];
                                    tag.className='errmsg';
                                    console.log('input[name="'+index+'"]');
                                    $('#f1').find('input[name="'+index+'"]').after(tag);
                                   }
                                })

                            }
                        }
                    })
            }

        </script>
    </body>
</html>